<template>
  <tm-app _class="relative">
    <tm-navbar title="我要提现" :followTheme="true" :hideHome="true">
    </tm-navbar>
    <tm-sheet :margin="[20, 20, 20, 0]" :round="4">
      <view
        class="flex flex-row flex-rw-center-between"
        v-for="item in state.drawTips"
        :key="item.id"
      >
        <tm-icon name="tmicon-md-planet" color="#666" :font-size="28"></tm-icon>
        <tm-text :font-size="28" color="#666" _class="ml-n4">{{
          item.sysValue
        }}</tm-text>
      </view>
    </tm-sheet>

    <tm-sheet
      :padding="[20, 30, 20, 120]"
      :margin="[20]"
      :round="4"
      :followTheme="true"
      _class="flex flex-col flex-col-center-center"
    >
      <tm-text
        :fontSize="66"
        _class="text-weight-b mb-n6"
        :label="state.drawInfo.withdrawAmount || '0.00'"
      >
      </tm-text>
      <tm-text>可提现金额 (元)</tm-text>
    </tm-sheet>
    <view class="mt--n25 mx-n10 pa-n5 round-4" style="background-color: #fff">
      <tm-text :fontSize="28" _class="text-weight-b" :followTheme="true">
        提现金额
      </tm-text>
      <tm-input
        prefix="tmicon-renminbi3"
        placeholder="请输入要提现的金额"
        suffixColor="rgba(103,47,244,1)"
        :height="100"
        type="digit"
        :margin="[0, 24]"
        :transprent="true"
        v-model="state.mentionForm.mentionAmount"
      >
        <template v-slot:right>
          <tm-text
            :follow-theme="true"
            @click="
              state.mentionForm.mentionAmount = state.drawInfo.withdrawAmount
            "
            >全部提现</tm-text
          >
        </template>
      </tm-input>

      <view class="flex flex-row flex-row-center-start mb-n10 px-n5">
        <tm-icon
          name="tmicon-exclamation-circle"
          color="#ff2414"
          _class="mr-n4"
        ></tm-icon>
        <tm-text
          color="#ff2414"
          :label="`温馨提示: 每笔提现金额最低为${
            state.drawInfo.lowestAmount || 0
          }元`"
        >
        </tm-text>
      </view>
      <tm-button
        block
        :label="btnTitle"
        :round="10"
        @click="startDraw"
      ></tm-button>
    </view>
    <tm-button
      block
      label="查看提现记录"
      :outlined="true"
      @click="navigatTo('withDrawRecords')"
      :round="10"
      :margin="[60, 20, 60, 0]"
    ></tm-button>
    <tm-button
      block
      :label="userMoneyCodeTitle"
      :outlined="true"
      :round="10"
      @click="navigatTo('setting')"
      :margin="[60, 20, 60, 0]"
    ></tm-button>
    <tm-message ref="msg" :lines="2"></tm-message>
  </tm-app>
</template>

<script setup>
import { onMounted, reactive, ref, computed } from "vue";
import {
  getMentionRecordInfoApi,
  addMentionApi,
  getSysDepositApi,
} from "@/api";
import { useUserStore } from "@/store";
import { onLoad, onReady } from "@dcloudio/uni-app";

const userStore = useUserStore();
const msg = ref(null);

const userMoneyCodeTitle = computed(() =>
  !userStore.userInfo.userMoneyCode
    ? "还未设置收款码，点击去设置"
    : "修改收款码"
);

const state = reactive({
  drawInfo: {},
  drawTips: [],
  mentionForm: {
    mentionAmount: null,
  },
  // 在页面中定义激励视频广告
  videoAd: null,
  // 广告是否看完
  addShowEnd: false,
});

const btnTitle = computed(() =>
  state.drawInfo.lowestStatus == "no" ? "今日提现次数已达上限" : "提现"
);

onReady(() => {
  // 在页面onLoad回调事件中创建激励视频广告实例
  if (uni.createRewardedVideoAd) {
    state.videoAd = uni.createRewardedVideoAd({
      adUnitId: "adunit-cdfbfbda024eddb1",
    });
    state.videoAd.onLoad(() => {});
    state.videoAd.onError((err) => {});
    state.videoAd.onClose((res) => {
      state.addShowEnd = res.isEnded;
      if (!res.isEnded) {
        uni.showToast({
          icon: "error",
          title: "视频未播放完毕",
        });
      } else {
        startDraw();
      }
    });
  }
});

const startAdd = () => {
  // 用户触发广告后，显示激励视频广告
  if (state.videoAd) {
    state.videoAd.show().catch(() => {
      // 失败重试
      state.videoAd
        .load()
        .then(() => state.videoAd.show())
        .catch((err) => {
          console.log("激励视频 广告显示失败");
        });
    });
  }
};

onMounted(async () => {
  getSysDepositApi().then((res) => {
    state.drawTips = [res];
  });
  state.drawInfo = await getMentionRecordInfoApi();
});

const navigatTo = (page) => {
  uni.navigateTo({
    url: "/myPages/" + page,
  });
};

const startDraw = async () => {
  if (!state.addShowEnd) {
    startAdd();
    return;
  }

  if (state.drawInfo.lowestStatus == "no") {
    msg.value.show({ model: "error", text: "今日提现次数已达上限" });
    return;
  }
  if (!state.mentionForm.mentionAmount) {
    msg.value.show({ model: "error", text: "提现金额不对" });
    return;
  }
  if (state.mentionForm.mentionAmount < state.drawInfo.lowestAmount) {
    msg.value.show({ model: "error", text: "提现不能小于最低金额" });
    return;
  }
  if (state.mentionForm.mentionAmount > state.drawInfo.withdrawAmount) {
    msg.value.show({ model: "error", text: "余额不足" });
    return;
  }
  msg.value.show({ model: "load", text: "提现中..." });
  await addMentionApi(state.mentionForm);
  msg.value.show({ model: "success", text: "提现成功" });
  state.mentionForm.mentionAmount = null;
  state.drawInfo = await getMentionRecordInfoApi();
};
</script>

<style scoped></style>
